<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/1/18
  Time: 18:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单</title>
</head>
<body>
<jsp:include page="header.jsp"/>
<main>
    <!-- Hero area Start-->
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="slider-area">
                    <div class="slider-height2 slider-bg5 d-flex align-items-center justify-content-center">
                        <div class="hero-caption hero-caption2">
                            <h2>订单</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  Hero area End -->

    <!--? Checkout Area Start-->
    <section class="checkout_area section-padding">
        <div class="container">
            <div class="billing_details">
                <div class="row">
                    <form class="row contact_form" action="${pageContext.request.contextPath}/orderList/addOrderList" method="post">
                        <input type="hidden" value="${sessionScope.user.id}" name="userId">
                        <div class="col-lg-8">
                            <h3>结算详情</h3>
                            <div class="col-md-6 form-group p_star">
                                <input type="text" class="form-control" id="first" name="name" placeholder="收件人姓名"/>
                            </div>
                            <div class="col-md-6 form-group p_star">
                                <input type="text" class="form-control" id="number" name="num" placeholder="收件人手机号" onblur="fun()" value=""/>
                                <span style="display: none" id="num">手机号不正确</span>
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <select class="country_select">
                                    <option value="1">中国</option>
                                    <option value="2">只支持在国内</option>
                                    <option value="4">不支持在国外</option>
                                </select>
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <input type="text" class="form-control" id="add1" name="city" placeholder="收件城市"/>
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <input type="text" class="form-control" id="add2" name="county" placeholder="收件县/区"/>
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <input type="text" class="form-control" id="city" name="detailed" placeholder="详细地址"/>
                            </div>
                            <div class="col-md-12 form-group">
                                <input type="text" class="form-control" id="zip" name="zip" placeholder="邮政编码" />
                            </div>
                            <div class="col-md-12 form-group">
                                <textarea class="form-control" name="remarks" id="message" rows="1" placeholder="订单备注"></textarea>
                            </div>

                        </div>
                        <div class="col-lg-4">
                            <div class="order_box">
                                <h2>你的订单</h2>
                                <ul class="list">
                                    <li>
                                        <a>书籍<span>总价</span>
                                        </a>
                                    </li>
                                    <%int i = 0;%>
                                    <c:forEach var="cart" items="${carts}">
                                        <li>
                                            <a href="#">${cart.books.bookName}
                                                <input type="hidden" value="${cart.bookId}" name="orderLists[<%=i%>].bookId">
                                                <input type="hidden" value="${cart.cartId}" name="carts[<%=i%>].cartId">
                                                <span class="middle">x ${cart.counts}</span>
                                                <input type="hidden" value="${cart.counts}" name="orderLists[<%=i++%>].counts">
                                                <c:set var="price" value="${cart.books.price}"/>
                                                <span class="last">￥${cart.counts * price}</span>
                                                <input value="${cart.counts * price}" type="hidden" id="sub">
                                            </a>
                                        </li>
                                    </c:forEach>
                                </ul>
                                <ul class="list list_2">
                                    <li>
                                        <a>合计<span id="total"></span></a>
                                        <input name="price" id="hj" type="hidden">
                                    </li>
                                </ul>
                                <input class="btn w-100" type="submit" value="提交订单">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--End Checkout Area -->

</main>
<jsp:include page="footer.jsp"/>
<!-- Scroll Up -->
<div id="back-top" >
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>
<jsp:include page="jsinclude.jsp"/>
<script>
    let sub = document.querySelectorAll("#sub");
    var total = 0;
    for (let i=0;i < sub.length;i++){
        total += Number(sub[i].value);
    }
    document.getElementById("total").innerHTML = "￥" + total;
    let p = document.getElementById("hj");
    p.value = total;

    var number = document.getElementById("number");
    var num = document.getElementById("num");
    function fun() {
        if((number.value < 13000000000 || number.value > 18999999999) && number.value != ''){
            num.style.display = "block";
        }else {
            num.style.display = "none";
        }
    }
</script>
</body>
</html>
